<link  type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet"/>
<script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
      dir: 'https://www.layuicdn.com/layui/' 
      ,version: false 
      ,debug: false 
      ,base: '' 
    });
</script>



<!-- 框架的组件文档 "https://www.layui.com/doc/element/progress.html" -->
<div class="layui-progress layui-progress-big" lay-filter="demo">
	<div class="layui-progress-bar" lay-percent="0%"></div>
</div>

<div class="layui-progress layui-progress-big" lay-filter="demo">
	<div class="layui-progress-bar layui-bg-orange" lay-percent="0%"></div>
</div>

<div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="demo">
	<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
</div>

<script type="text/javascript">
	//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
	layui.use('element', function(){
		var element = layui.element;
		var value=0;
		var interval=setInterval(function(){
			value+=10;
			if (value==100) {
				clearInterval(interval);
			}
			
	  	element.progress('demo', value+'%');//设置值
	  	console.log(value);
	  },1000)
		
	});
</script>